import React ,{ useState,useEffect }from 'react';
import { Paper, Typography, Box } from '@mui/material';
import { useNavigate } from 'react-router-dom';

import hotvideo1 from '../resources/hotvideo/hotvideo1.png';
import hotvideo2 from '../resources/hotvideo/hotvideo2.png';
import hotvideo3 from '../resources/hotvideo/hotvideo3.png';
import hotvideo4 from '../resources/hotvideo/hotvideo4.png';
import { fetchRecommendBelow } from '../api/recommend';
function RecommendUnder({infohash}) {
  // const videos = [
  //   { title: "东北街头麻辣烫，这量大的就逆天！", img: hotvideo1, id: 1 },
  //   { title: "Tung Tung Tung Sahur全面详解实战操作教学 有史以来最数值的杀", img: hotvideo2, id: 2 },
  //   { title: "花2980元学大锅卤菜？我这花0.65元学的怎么样？", img: hotvideo3, id: 3 },
  //   { title: "老板来碗牛肉面，不要面", img: hotvideo4, id: 4 },
  //   { title: "第五个视频标题示例", img: hotvideo1, id: 5 },
  // ];

  const [videos, setVideos] = useState([]);
  console.log("infohashabaaba:",infohash);

  const navigate = useNavigate();
  useEffect(() => {
      fetchRecommendBelow(infohash)
        .then(response => {
          console.log(response);
          setVideos(response);
        })
        .catch(error => {
          console.error('获取推荐视频失败:', error);
        });
    }, [infohash]);
    const handleClick = (id) => {
      navigate(`/seed/${id}`);
              window.location.reload();          // 刷新页面

    };

  return (
    <Paper sx={{ padding: 2, overflow: 'hidden' }}>
      <Typography
        variant="h6"
        fontWeight="bold"
        gutterBottom
        sx={{ mb: 2 }}
      >
        相关推荐
      </Typography>
      <Box
        sx={{
          display: 'flex',
          gap: 2,
          overflow: 'hidden',
        }}
      >
        {videos.slice(0, 5).map((video) => (
          <Box
            key={video.torrent.id}
            onClick={() => handleClick(video.torrent.id)}
            sx={{
              flex: 1,             // 平分宽度
              cursor: 'pointer',
              '&:hover': { backgroundColor: '#f0f0f0' },
              borderRadius: 1,
              p: 1,
              userSelect: 'none',
              minWidth: 0,         // 防止文字溢出导致伸宽
            }}
          >
            <img
              src={video.coverImageBase64}
              style={{
                width: '100%',
                height: 140,      // 稍微高点更好看
                borderRadius: 8,
                objectFit: 'cover',
              }}
            />
            <Typography
              variant="body2"
              sx={{
                mt: 1,
                fontWeight: 'medium',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                display: '-webkit-box',
                WebkitLineClamp: 2,
                WebkitBoxOrient: 'vertical',
                whiteSpace: 'normal',
              }}
            >
              {video.torrent.name||video.torrent.fileName}
            </Typography>
          </Box>
        ))}
      </Box>
    </Paper>
  );
}

export default RecommendUnder;
